<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>作业2</title>
    <SCRIPT LANGUAGE="JavaScript">
        function createCode(len)
        {
            var seed = new Array(
                    'abcdefghijklmnopqrstuvwxyz',
                    'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
                    '0123456789'
            );               //创建需要的数据数组
            var idx,i;
            var result = '';   //返回的结果变量
            for (i=0; i<len; i++) //根据指定的长度
            {
                idx = Math.floor(Math.random()*3); //获得随机数据的整数部分-获取一个随机整数
                result += seed[idx].substr(Math.floor(Math.random()*(seed[idx].length)), 1);//根据随机数获取数据中一个值
            }
            return result; //返回随机结果
        }
 
        function test() {
            var inputRandom=document.getElementById("inputRandom").value;
            var autoRandom=document.getElementById("autoRandom").innerHTML;
            if(inputRandom==autoRandom) {
                alert("通过验证");
            } else {
                alert("没有通过验证");
            }
 
        }
    </SCRIPT>


  </head>
  <body>
    <div id="test1">
    <p>
    <form action="作业2.html" method="get">
        <span style="color: blue">欢迎注册会员</span></p>
      <label for="phonenumber">手机号码：</label>
      <input type="text" id="phonemuber" name="phonenumber" /><span
        style="color: red"
        >必填</span
      ><br />
      <label for="pswd">创建密码：</label>
      <input type="password" id="pswd" name="pswd" /><span style="color: red"
        >必填</span
      ><br />
      <label for="em">注册邮箱：</label>
      <input type="text" id="em" name="em" /><span style="color: red">必填</span
      ><br />

      <p>
        性别: <input type="radio" name="choice" value="男" />男&nbsp;&nbsp;
        <input type="radio" name="choice" value="女" />女<br />
      </p>
      生日：
      <input type="date" name="mydate" /><br />
      <label for="age">年龄：</label> <input type="text" name="age" id="age" />
      <p>验证码长度：
        <SELECT id="sel">
            <option value=1>1</option>
            <option value=3>3</option>
            <option value=5>5</option>
            <option value=7 selected>7</option>
            <option value=9>9</option>
        </SELECT>
        <BR>
        <table>
            <tr>
                <td>验证码：</td>
                <td><input type="text" id="inputRandom"></td>
                <td><label id="autoRandom" value=""></label><INPUT TYPE="button" VALUE="获取验证码" ONCLICK="autoRandom.innerHTML=createCode(sel.value)"></td>
                <td><input type="button" value="验证" οnclick="test()"></td>
            </tr>
         
        </table>
        <script type="text/javascript">
            window.onload()=autoRandom.innerHTML=createCode(sel.value);
        </script>

        籍贯：
        <select name="省份" id="省份">
          <option value="湖北">湖北 &nbsp;&nbsp;</option>
          <option value="湖南">湖南&nbsp;&nbsp;</option>
        </select>

        <select name="城市" id="城市">
          <option value="武汉">武汉</option>
          <option value="黄冈">黄冈</option>
        </select>
      </p>
      <div>
        <span id="capcha">5位验证码</span>
        <img src="images/arrow_03.png" id="change_capcha" alt="" />
        </div>
        
      <p>
        个人学历：<select name="个人学历" id="个人学历">
          <option value="本科">本科</option>
          <option value="研究生">研究生</option>
          <option value="大专">大专</option>
          <option value="中专">中专</option>
          <option value="高中">高中</option>
          <option value="初中">初中</option>
          <option value="小学">小学</option>
        </select>
      </p>
      月薪：<input
        type="range"
        id="月薪"
        name="月薪"
        min="0"
        max="10000"
        step="100"
        value="5000"
      /><span id="smg"></span>
      <script>
        var msg = document.getElementById("smg");
        window.onload = function () {
          msg.innerHTML = document.getElementById("月薪").value;
        };

        document.getElementById("月薪").onchange = function () {
          msg.innerHTML = this.value;
        };
      </script>
      <br />
      个人爱好：<input
        type="radio"
        name="爱好"
        value="唱歌"
        checked="checked"
      />唱歌 <input type="radio" name="爱好" value="跑步" />跑步
      <input type="radio" name="爱好" value="游泳" />游泳 <br />
      <!-- <form > -->
      <!-- 附件：<input type="file" name="myfile" accept="文件类型"> -->
      <!-- </form> -->
      <!-- 文件类型 -->
      >
        <p>个人照片：</p>
        <p></p>
        <div
          id="test-image-preview"
          style="
            border: 1px solid silver;
            width: 200px;
            height: 200px;
            background-repeat: no-repeat;
            background-position: center;
          "
        ></div>
        <p></p>
        <p>
          <input type="file" id="test-image-file" name="test" />
        </p>
        <p id="test-file-info"></p>

      <script>
        var fileInput = document.getElementById("test-image-file");
        var info = document.getElementById("test-file-info");
        var preview = document.getElementById("test-image-preview");
        fileInput.addEventListener("change", function () {
          // 监听change事件
          preview.style.backgroundImage = ""; // 清除背景图片
          if (!fileInput.value) {
            info.innerHTML = "没有选择文件";
            return;
          }
          var file = fileInput.files[0]; // 获取File引用
          // 获取File信息:
          // info.innerHTML = '文件: ' + file.name + '<br>' + '大小: ' + file.size + '<br>' + '修改: ' + file.lastModifiedDate;
          // if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
          // alert('不是有效的图片文件!');
          // return;
          // }
          var reader = new FileReader(); // 读取文件
          reader.onload = function (e) {
            // 发起一个异步操作来读取文件内容
            var data = e.target.result; // data串形如： '...(base64编码)...'
            preview.style.backgroundImage = "url(" + data + ")";
          };
          reader.readAsDataURL(file); // 以DataURL的形式读取文件
        });
      </script>
      个人简介： <br />
      <textarea name="intro" cols="50" rows="10">请填写个人简历</textarea>
      <br />
      <input type="submit" value="提交" />
      <input type="reset" value="重填" />
    </form>
</div>
  </body>
</html>
